<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>User</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/user/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="/user/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="/user/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/user/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/user/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/user/img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <script type="text/javascript">
        function changeTelephone() {
            //这里唯一需要注意的就是这个form-add的id
            var formData = new FormData($("#form_telephone")[0]);
            $.ajax({
                //接口地址
                url: '/userChangeTelephone' ,
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    //成功的回调
                    if(data.toString()== "success"){
                        alert("修改成功");
                    }else
                        alert("修改失败");

                },
                error: function (returndata) {
                    //请求异常的回调
                    alert("网络访问失败，请稍后重试!");
                }
            });
        }

        function changeEmail() {
            //这里唯一需要注意的就是这个form的id
            var formData = new FormData($("#form_email")[0]);
            $.ajax({
                //接口地址
                url: '/userChangeEmail' ,
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    //成功的回调
                    if(data.toString()== "success"){
                        alert("修改成功");
                    }else
                        alert("修改失败");

                },
                error: function (returndata) {
                    //请求异常的回调
                    modals.warn("网络访问失败，请稍后重试!");
                }
            });
        }

        function changePassword() {
            //这里唯一需要注意的就是这个form-add的id
            var myform=document.getElementById('form_password');
            var formData = new FormData(myform);
            $.ajax({
                //接口地址
                url: '/userChangePassword' ,
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    //成功的回调
                    if(data.toString()== "success"){
                        alert("修改成功");
                    }else if(data.toString()=="error")
                        alert("修改失败");
                    else
                        alert("新密码不一致")
                },
                error: function (returndata) {
                    //请求异常的回调
                    modals.warn("网络访问失败，请稍后重试!");
                }
            });
        }
    </script>
</head>

<body>
<div class="page">
    <!-- 顶部主菜单-->
    <header class="header">
        <nav class="navbar">
            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <!-- Navbar Header-->
                    <div class="navbar-header">
                        <!-- Navbar Brand --><a href="" class="navbar-brand d-none d-sm-inline-block">
                        <div class="brand-text d-none d-lg-inline-block"><strong>fake</strong></div>
                    </a>
                    </div>
                    <!-- Navbar Menu -->
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                        <!-- Logout    -->
                        <li class="nav-item"><a href="/userLogout" class="nav-link logout"><i
                                class="fa fa-sign-out"></i></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="page-content d-flex align-items-stretch">
        <!--左侧标签栏-->
        <nav class="side-navbar">
            <ul class="list-unstyled">
                <li><a href="/userHello"> <i class="icon-home"></i>主页</a></li>
                <li class="active"><a href="#"> <i class="icon-grid"></i>订单</a></li>
                <li><a href="/userVip"> <i class="icon-padnote"></i>VIP</a></li>
                <li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i
                        class="fa fa-bar-chart"></i>个人信息</a>
                    <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
                        <li><a data-toggle="modal" data-target="#telephone">修改手机号</a></li>
                        <li><a data-toggle="modal" data-target="#email">修改邮箱号</a></li>
                        <li><a data-toggle="modal" data-target="#password">修改密码</a></li>
                    </ul>
                </li>

            </ul>
        </nav>

        <!--修改手机号-->
        <div class="modal fade" id="telephone" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <form id="form_telephone" class="form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="telephone" placeholder="手机号">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <input type="submit" class="btn btn-default" onclick="changeTelephone()" value="提交"/>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--修改邮箱号-->
        <div class="modal fade" id="email" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <form id="form_email" class="form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="input_email" placeholder="邮箱号">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <input type="submit" class="btn btn-default" onclick="changeEmail()" value="提交"/>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--修改密码-->
        <div class="modal fade" id="password" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <form id="form_password" class="form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="input_password1" placeholder="旧密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="input_password2" placeholder="新密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="input_password3" placeholder="确认密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <input type="submit" class="btn btn-default" onclick="changePassword()" value="提交"/>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="setdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <form id="form_date" class="form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="input_password1" placeholder="旧密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="input_password2" placeholder="新密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="input_password3" placeholder="确认密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <input type="submit" class="btn btn-default" onclick="changePassword()" value="提交"/>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="content-inner">
            <!-- Projects Section-->
            <section class="projects no-padding-top" >
                <div class="container-fluid">
                    <!-- Project-->
                    <h1 class="page-header ">有效订单</h1>
                    <div class="project" role="tabpanel" th:each="order:${orderList}">
                        <div class="row bg-white has-shadow">
                            <div class="left-col col-lg-6 d-flex align-items-center justify-content-between">
                                <div class="project-title d-flex align-items-center">
                                    <div class="image has-shadow"><img src="/user/img/project-1.jpg" alt="..."
                                                                       class="img-fluid"></div>
                                    <div class="text">
                                        <h3 class="h4" th:text="${order.getName()}"></h3>
                                        <small th:text="${order.getStation()}"></small>
                                    </div>
                                </div>
                                <div class="project-date"><span
                                        class="hidden-sm-down">理发店 [[${order.getShopid()}]]</span></div>
                            </div>
                            <div class="right-col col-lg-6 d-flex align-items-center">
                                <div class="comments"><i class="fa fa-comment-o"></i>理发师[[${order.getBarberid()}]]</div>
                                <form action="/userCancelOrder" method="post">
                                    <input type="hidden" name="orderId" th:value="${order.getId()}">
                                    <input class="btn btn-primary" type="submit" value="取消预约"/>
                                </form>
                                <form action="/userFinishOrder" method="post">
                                    <input type="hidden" name="orderId" th:value="${order.getId()}">
                                    <input class="btn btn-primary" type="submit" value="完成消费"/>
                                </form>
                            </div>
                        </div>
                    </div>

                    <h1 class="page-header ">历史记录</h1>
                    <div class="project" role="tabpanel" th:each="corder:${corderList}">
                        <div class="row bg-white has-shadow">
                            <div class="left-col col-lg-6 d-flex align-items-center justify-content-between">
                                <div class="project-title d-flex align-items-center">
                                    <div class="image has-shadow"><img src="/user/img/project-1.jpg" alt="..."
                                                                       class="img-fluid"></div>
                                    <div class="text">
                                        <h3 class="h4" th:text="${corder.getName()}"></h3>
                                        <small th:text="${corder.getStation()}"></small>
                                    </div>
                                </div>
                                <div class="project-date"><span
                                        class="hidden-sm-down">理发店 [[${corder.getShopid()}]]</span></div>
                            </div>
                            <div class="right-col col-lg-6 d-flex align-items-center">
                                <div class="comments"><i class="fa fa-comment-o"></i>理发师[[${corder.getBarberid()}]]</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script src="/user/vendor/jquery/jquery.min.js"></script>
<script src="/user/vendor/popper.js/umd/popper.min.js"></script>
<script src="/user/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/user/vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="/user/vendor/chart.js/Chart.min.js"></script>
<script src="/user/vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="/static/user/js/charts-home.js"></script>
<!-- Main File-->
<script src="/user/js/front.js"></script>
</body>
</html>